<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我的费用</title>
    <link rel="stylesheet" href="../../lib/layui/layui/css/layui.css">
    <script type="text/javascript" src="../../js/news/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="../../lib/layui/layui/lay/dest/layui.all.js"></script>
    <script src="../../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/highcharts.js"></script>

    <style>
        * {
            font-family: "Microsoft Yahei" !important;
        }

        nav button {
            margin-left: 5px;
            padding: .25rem .5rem;
            font-size: .875rem;
            border-radius: .2rem;
            margin-top: 10px;
        }

        nav div {
            float: right !important;
            margin: 15px;
        }

        nav {
            height: 50px;
            border-bottom: 1px solid #cfdbe2;
            background-color: #fafbfc;
            border-radius: 0;
        }

        .layui-tab {
            margin: 0;
        }

        .content {
            height: 544px;
            overflow: auto;
            margin: 14px;
            padding: 14px;
            background: #fff;
        }

        .layui-tab-content {
            background-color: #F5F7FA;
        }

        .search {
            display: inline;
            margin-bottom: 1px;
            width: 185px;
            border: 0;
            background: #fafbfc;
        }

        .allBtn {
            float: left !important;
            margin-top: 10px;
            width: 70px;
            margin-left: 27px;
            border: none;
            background: #fafbfc;
        }

        .screen {
            float: left !important;
            margin-top: 10px;
            width: 70px;
            margin-left: 27px;
            border-radius: 5px;
            color: black;
            border-color: #03a9f4;
            background: #fafbfc;
            border: none;
        }

        .one {
            border: 1px solid #03a9f4;
            border-radius: 5px;
            color: #03a9f4;
            border-color: #03a9f4;
            background: #fafbfc;
        }

        div .layui-input-inline {
            padding-left: 25px;
        }

        td a {
            cursor: pointer;
        }

        .menu ul {
            float: right;
            margin-left: 25px;
        }

        .menu ul li {
            float: right;
            background: white;
            padding: 0 15px;
        }

        .menu {
            position: absolute;
            top: 37px;
            left: 346px;
            z-index: 1000;
            display: none;
            /* float: left; */
            min-width: 160px;
            padding: 15px 30px;
            margin: 2px 0 0;
            font-size: 1rem;
            color: #373a3c;
            text-align: left;
            list-style: none;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: .25rem;
        }

        .menu div div {
            margin: 15px 0;
        }
    </style>
</head>
<body>
<form class="layui-form">
    <nav class="nav1">
        <button type="button" filter="year" class="layui-btn layui-btn-primary layui-btn-sm screen one classBtn">年
        </button>
        <button type="button" filter="quarter" class="layui-btn layui-btn-primary layui-btn-sm screen  classBtn">季度
        </button>
        <button type="button" filter="month" class="layui-btn layui-btn-primary layui-btn-sm screen  classBtn">月
        </button>
        <%--<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" style="float: right;margin-right: 30px">--%>
        <%--导出--%>
        <%--</button>--%>
        <button type="button" class="layui-btn  layui-btn-sm layui-btn-normal" style="float: right;margin-right: 30px"
                onclick="javascript:window.location.href='/charge/add'">新建费用
        </button>
        <%--<button type="button" class="layui-btn layui-btn-normal layui-btn-sm iconView" style="float: right;">图表视图--%>
        </button>
    </nav>
    <nav class="nav2" style="display: none">
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm allBtn one classBtn">全部</button>
        <button type="button" value="1" class="layui-btn layui-btn-primary layui-btn-sm screen  classBtn">本月</button>
        <button type="button" value="2" class="layui-btn layui-btn-primary layui-btn-sm screen  classBtn">本周</button>
        <button type="button" value="3" class="layui-btn layui-btn-primary layui-btn-sm screen  classBtn">今天</button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm screen" style="width:100px" id="screen">
            更多筛选&nbsp;▼
        </button>
        <button type="button" class="layui-btn layui-btn-primary  layui-btn-sm navRen"
                style="float: right;margin-right: 30px">返回
        </button>
        <div style="float: right !important;display: inline-block;height: 30px;margin-top: 10px;border-bottom: 1px solid #ccc;">
            <input type="text" class="search" placeholder="查询事由"/>
            <span style="padding: 5px;color: #999;cursor: pointer;">
                <i class="layui-icon layui-icon-search"></i>
                </span>
        </div>
        <%--<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" style="float: right;" >导出</button>--%>
    </nav>
    <div class="menu">
        <div>
            <div>
                <label style="font-weight: bold;">时间范围</label>
                <ul>
                    <li style="background: white" value="4">最近三天</li>
                    <li style="background: white" value="5">最近一周</li>
                    <li style="background: white" value="6">最近一月</li>
                </ul>
            </div>
            <div>
                <label style="font-weight: bold;">承担方式</label>
                <ul>
                    <li style="background: white;width: 65px;text-align: center;" value="3">公司</li>
                    <li style="background: white;width: 65px;text-align: center;" value="2">部门</li>
                    <li style="background: white;width: 65px;text-align: center;" value="1">个人</li>
                </ul>
            </div>
        </div>
    </div>
    <div>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <div class="layui-tab-content">
                <div class="content year">
                    <div style="margin-bottom: 30px">
                        <span class="layui-input-inline user">系统管理员 </span>
                        <span class="layui-input-inline" style="width: 130px;border-radius: 5px">
                           <input type="text" class="layui-input" id="year" name="year" placeholder="yyyy">
                        </span>
                        <%--<span class="layui-input-inline">部门预警方式 : 未设置</span>--%>
                        <%--<span class="layui-input-inline">部门预警数值 : 未设置</span>--%>
                        <%--<span class="layui-input-inline">个人预警方式 : 未设置</span>--%>
                        <%--<span class="layui-input-inline">个人预警数值 : 未设置</span>--%>
                    </div>
                    <table class="layui-table">
                        <tbody class="quarterTR">

                        </tbody>
                    </table>
                    <div style="display: none">
                        <div id="yearDrawing"></div>
                    </div>
                </div>
                <div class="content quarter" style="display: none">
                    <div style="margin-bottom: 30px">
                        <span class="layui-input-inline user">系统管理员 </span>
                        <span class="layui-input-inline" style="width: 130px;border-radius: 5px">
                           <input type="text" class="layui-input" id="quarter" name="quarter" placeholder="yyyy">
                        </span>
                        <%--<span class="layui-input-inline">部门预警方式 : 未设置</span>--%>
                        <%--<span class="layui-input-inline">部门预警数值 : 未设置</span>--%>
                        <%--<span class="layui-input-inline">个人预警方式 : 未设置</span>--%>
                        <%--<span class="layui-input-inline">个人预警数值 : 未设置</span>--%>
                    </div>
                    <table class="layui-table">
                        <tbody name="quarterTr">

                        </tbody>
                    </table>
                    <div style="margin-top: 30px;display: none">
                        <div id="quarterDrawing"></div>
                    </div>
                </div>
                <div class="content month" style="display: none">
                    <div style="margin-bottom: 30px">
                        <span class="layui-input-inline user">系统管理员 </span>
                        <span class="layui-input-inline" style="width: 130px;border-radius: 5px">
                           <input type="text" class="layui-input" id="month" placeholder="yyyy-MM">
                        </span>
                        <%--<span class="layui-input-inline">部门预警方式 : 未设置</span>--%>
                        <%--<span class="layui-input-inline">部门预警数值 : 未设置</span>--%>
                        <%--<span class="layui-input-inline">个人预警方式 : 未设置</span>--%>
                        <%--<span class="layui-input-inline">个人预警数值 : 未设置</span>--%>
                    </div>
                    <table class="layui-table">
                        <tbody name="monthTr">


                        </tbody>
                    </table>
                    <div style="margin-top: 30px;display: none">
                        <div id="monthDrawing"></div>
                    </div>
                </div>
                <div class="content particulars" style="display: none">
                    <table class="layui-hide" id="particulars" lay-filter="particulars"></table>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="parDel">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="exa">查看</a>
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>
</form>
</body>
<script>
    $('.content').height($(window).height() - 130);
    $('#screen').click(function () {
        var index = $('.classBtn').index(this);
        $('.content:eq("' + index + '")').css('display', 'block').siblings('.content').css('display', 'none')
        $(this).toggleClass("one");
        $(this).siblings('button').removeClass("one");
        $('.menu').toggle();
    });

    $('.iconView').click(function () {
        $(this).siblings().eq(3).toggle();
        if ($(this).siblings().eq(0).is('.one')) {
            $(this).parents('nav').siblings('div').find('.year').children().eq(1).toggle()
            $(this).parents('nav').siblings('div').find('.year').children().eq(2).toggle()
        } else if ($(this).siblings().eq(1).is('.one')) {
            $(this).parents('nav').siblings('div').find('.quarter').children().eq(1).toggle()
            $(this).parents('nav').siblings('div').find('.quarter').children().eq(2).toggle()
        } else if ($(this).siblings().eq(2).is('.one')) {
            $(this).parents('nav').siblings('div').find('.month').children().eq(1).toggle()
            $(this).parents('nav').siblings('div').find('.month').children().eq(2).toggle()
        }

        $("#yearDrawing").highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '费用统计报表'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: ['出差费用-车费', '出差费用-饭费']
//                categories:dataMonth
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: false          // 开启数据标签
                    },
                    enableMouseTracking: true, // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                    showInLegend: false
                }
            },
            credits: {
                enabled: true     //不显示LOGO
            },
            series: [{
                name: '费用',
                data: [29, 200]
//                data:dataNum
            }]
        });
        $("#quarterDrawing").highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '费用统计报表'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: ['出差费用-车费', '出差费用-饭费']
//                categories:dataMonth
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: false          // 开启数据标签
                    },
                    enableMouseTracking: true, // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                    showInLegend: false
                }
            },
            credits: {
                enabled: true     //不显示LOGO
            },
            series: [{
                name: '费用',
                data: [29, 200]
//                data:dataNum
            }]
        });
        $("#monthDrawing").highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '费用统计报表'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: ['出差费用-车费', '出差费用-饭费']
//                categories:dataMonth
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: false          // 开启数据标签
                    },
                    enableMouseTracking: true, // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                    showInLegend: false
                }
            },
            credits: {
                enabled: true     //不显示LOGO
            },
            series: [{
                name: '费用',
                data: [29, 200]
//                data:dataNum
            }]
        });
    });
    $('.navRen').click(function () {
        $('.menu').hide();
        $('.particulars').hide();
        $('.year').show();
        $('.nav2').hide();
        $('.nav1').show();
    })
    layui.use(['form', 'layedit', 'laydate', 'layedit', 'table'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , layedit = layui.layedit
            , table = layui.table;

        layedit.build('texPart'); //建立编辑器
        form.render();
        //日期
        laydate.render({
            elem: '#quarter',
            type: 'year',
            value: new Date()
            ,done: function(value, date, endDate){
                tableData('quarter',value)
            }
        });
        //日期
        laydate.render({
            elem: '#year',
            type: 'year',
            value: new Date()
            ,done: function(value, date, endDate){
                tableData('year',value)
            }
        });
        //日期
        laydate.render({
            elem: '#month',
            type: 'month',
            value: new Date()
            ,done: function(value, date, endDate){
                tableData('month',date.year,date.month)
            }
        });
        $('.nav1 .classBtn').click(function () {
            tableData($(this).attr('filter'))
            var indexBtn = $('.classBtn').index(this);
            $('.content:eq("' + indexBtn + '")').css('display', 'block').siblings('.content').css('display', 'none')
            $(this).toggleClass("one");
            $(this).siblings('button').removeClass("one");
        });
        $('.condition').click(function () {
            condition()
        })
        tableData('year');
        function tableData(tableData,yearT,monthT) {
            var text = {}
            if (tableData == 'year') {

                if(yearT==undefined){
                    text = {
                        filter: tableData,
                        year: $('#year').val(),
                    }
                }else{
                    text = {
                        filter: tableData,
                        year: yearT,
                    }
                }
            } else if (tableData == 'quarter') {
                if(yearT==undefined) {
                    text = {
                        filter: tableData,
                        quarter: $('#quarter').val(),
                    }
                }else{
                    text = {
                        filter: tableData,
                        quarter:yearT,
                    }
                }
            } else if (tableData == 'month') {
                if(yearT==undefined&&monthT==undefined) {
                    text = {
                        filter: tableData,
                        year: $('#month').val().split("-")[0],
                        month: $('#month').val().split("-")[1]
                    }
                }else{
                    text = {
                        filter: tableData,
                        year: yearT,
                        month: monthT
                    }
                }
            }
            $.ajax({
                url: '/chargeList/findMyChargeList',
                type: 'post',
                dataType: 'json',
                data: text,
                success: function (res) {
                    var data = res.obj;
                    if (tableData == 'year') {
                        var year=$('#year').val();
                        var str = '  <tr>' +
                            '<td colspan="2">科目</td>' +
                            ' <td>1月</td>' +
                            '<td>2月</td>' +
                            '<td>3月</td>' +
                            '<td>4月</td>' +
                            ' <td>5月</td>' +
                            ' <td>6月</td>' +
                            ' <td>7月</td>' +
                            '<td>8月</td>' +
                            ' <td>9月</td>' +
                            ' <td>10月</td>' +
                            ' <td>11月</td>' +
                            ' <td>12月</td>' +
                            ' <td colspan="2">合计</td>' +
                            '  </tr>';
                        for (var i = 0; i < data.length; i++) {
                            for (var j = 0; j < data[i].childList.length; j++) {
                                var num = j;
                                var strTr = '';
                                var strtd = ''
                                if (num == 0) {
                                    strTr = '<td rowspan="' + data[i].childList.length + '">' + data[i].chargeTypeName + '</td>'
                                    strtd = '<td rowspan="' + data[i].childList.length + '"><a style="color:#03a9f4" year='+year+' chargeTypeId='+ data[i].chargeTypeId+' class="condition">' + data[i].chargeCostSum + '</a></td>'
                                } else {
                                    strTr = ''
                                    strtd = ''
                                }
                                str += '<tr>' + strTr +
                                    ' <td>' + data[i].childList[j].chargeTypeName + '</td>' +
                                    function () {
                                        var childList = data[i].childList[j].bigDecimalMap
                                        var bigDecimal = ''
                                        if (childList != undefined) {
                                            $.each(childList, function (key, values) {
                                                bigDecimal += '<td><a style="color:#03a9f4" class="condition" year='+year+' chargeTypeId='+ data[i].childList[j].chargeTypeId+'>' + values + '<a></td>'
                                            });
                                        } else {
                                            for (var p = 0; p < 12; p++) {
                                                bigDecimal += '<td></td>'
                                            }
                                        }
                                        return bigDecimal
                                    }()
                                    + '<td><a style="color:#03a9f4" class="condition" year='+year+' chargeTypeId='+ data[i].childList[j].chargeTypeId+'>' + nonEmpty(data[i].childList[j].chargeCostSum) + '</a></td>' + strtd +
                                    '</tr>'
                            }

                        }
                        str += '<tr>' +
                            ' <td colspan="2">合计</td>' +
                         function () {
                             var td=''
                             for (var y = 1; y <= 12; y++) {
                                 td += '<td>' + nonEmpty(res.object[y]) + '</td>'
                             }
                             return td
                         }()+

                            '<td colspan="2"><a style="color:#03a9f4" class="condition" year='+year+'>' + res.obj1 + '</a></td>' +
                            '</tr>'
                        $('.quarterTR').html(str)
                    }
                    else if (tableData == 'quarter') {
                        var quarter=$('#quarter').val();
                        var str = ' <tr>' +
                            ' <td colspan="2">科目</td>' +
                            ' <td>第一季度</td>' +
                            '  <td>第二季度</td>' +
                            ' <td>第三季度</td>' +
                            '  <td>第四季度</td>' +
                            ' <td colspan="2">合计</td>' +
                            '   </tr>';
                        for (var i = 0; i < data.length; i++) {
                            for (var j = 0; j < data[i].childList.length; j++) {
                                var strTr = '';
                                var strtd = ''
                                var num = j
                                if (num == 0) {
                                    strTr = '<td rowspan="' + data[i].childList.length + '">' + data[i].chargeTypeName + '</td>'
                                    strtd = '<td rowspan="' + data[i].childList.length + '"><a style="color:#03a9f4" class="condition" quarter='+quarter+' chargeTypeId='+ data[i].childList[j].chargeTypeId+'>' + data[i].chargeCostSum + '</a></td>'
                                } else {
                                    strTr = ''
                                    strtd = ''
                                }
                                str += ' <tr>'+strTr+'<td>' + data[i].childList[j].chargeTypeName + '</td>' +
                                    function () {
                                        var childList = data[i].childList[j].bigDecimalMap;
                                        var ListSre = '';
                                        if (childList == undefined) {
                                            ListSre += '<td></td>' +
                                                ' <td></td>' +
                                                ' <td></td>' +
                                                '   <td></td>'
                                        } else {
                                            if (childList != undefined) {
                                                $.each(childList, function (key, values) {
                                                    ListSre += '<td><a style="color:#03a9f4" class="condition" quarter='+quarter+' chargeTypeId='+ data[i].childList[j].chargeTypeId+'>' + values + '<a></td>'
                                                });
                                            }

                                        }
                                        return ListSre


                                    }()
                                    + '<td><a style="color:#03a9f4" class="condition" quarter='+quarter+'>' + nonEmpty(data[i].childList[j].chargeCostSum) + '</a></td>' + strtd +
                                    '</tr>'
                            }

                        }

                        str += ' <tr>' +
                            ' <td colspan="2">合计</td>' +
                            '  <td>' + nonEmpty(res.object[1]) + '</td>' +
                            '  <td>' + nonEmpty(res.object[2]) + '</td>' +
                            '  <td>' + nonEmpty(res.object[3]) + '</td>' +
                            '  <td>' + nonEmpty(res.object[4]) + '</td>' +
                            '  <td colspan="2"><a style="color:#03a9f4" class="condition" quarter='+quarter+'>' + nonEmpty(res.obj1) + '</a></td>' +
                            '  </tr>'
                        $('[name="quarterTr"]').html(str)
                    }
                    else if (tableData == 'month') {
                        var year=$('#month').val().split("-")[0]
                        var month=$('#month').val().split("-")[1]
                        var day = new Date($('#year').val(),$('#month').val().split("-")[1],0);
                        var str = ' <tr>' +
                            ' <td colspan="2">科目</td>' +
                            function () {
                            var td=''
                                for(var y=1;y<=day.getDate();y++){
                                    td +='<td >'+y+'</td>'
                                }
                                return td
                            }()+
                            '  <td colspan="2">合计</td>' +
                            '  </tr>';
                        for (var i = 0; i < data.length; i++) {
                            for (var j = 0; j < data[i].childList.length; j++) {
                                var strTr = '';
                                var strtd = ''
                                var num = j
                                if (num == 0) {
                                    strTr = '<td rowspan="' + data[i].childList.length + '">' + data[i].chargeTypeName + '</td>'
                                    strtd = '<td rowspan="' + data[i].childList.length + '"><a style="color:#03a9f4" class="condition" year='+year+' month='+month+'  chargeTypeId='+ data[i].chargeTypeId+'>' + data[i].chargeCostSum + '</a></td>'
                                } else {
                                    strTr = ''
                                    strtd = ''
                                }
                                str += ' <tr>'+strTr+'<td>' + data[i].childList[j].chargeTypeName + '</td>'
                                     +
                                    function () {
                                        var childList = data[i].childList[j].bigDecimalMap;
                                        var ListSre = '';
                                        if (childList == undefined) {
                                            for (var p = 0; p < day.getDate(); p++) {
                                                ListSre += '<td></td>'
                                            }
                                        } else {
                                            if (childList != undefined) {
                                                $.each(childList, function (key, values) {
                                                    ListSre += '<td><a style="color:#03a9f4" class="condition" year='+year+' month='+month+'  chargeTypeId='+ data[i].childList[j].chargeTypeId+'>' + values + '<a></td>'
                                                });
                                            }

                                        }
                                        return ListSre


                                    }()
                                    + '<td><a style="color:#03a9f4" class="condition" year='+year+' month='+month+'  chargeTypeId='+ data[i].childList[j].chargeTypeId+'>' + nonEmpty(data[i].childList[j].chargeCostSum) + '</a></td>' + strtd +
                                    '</tr>'
                            }

                        }

                        str += ' <tr>' +
                            ' <td colspan="2">科目</td>' +
                            function () {
                                var td=''
                                for(var y=1;y<=day.getDate();y++){
                                    td +='<td>'+nonEmpty(res.object[y])+'</td>'
                                }
                                return td
                            }()+
                            '  <td colspan="2"><a style="color:#03a9f4" class="condition" year='+year+' month='+month+' >' + nonEmpty(res.obj1) + '</a></td>' +
                            '  </tr>'
                        $('[name="monthTr"]').html(str)
                    }
                    $('.condition').click(function () {
                        if($(this).parents('.content').attr('class').indexOf('year')!=-1){
                            $('#screen').attr('chargeTypeId',$(this).attr('chargeTypeId'));
                            $('#screen').attr('year',$(this).attr('year'));
                            $('#screen').attr('typeName','year');
                            condition('','','',$(this).attr('year'),'',$(this).attr('chargeTypeId'))
                        }else if($(this).parents('.content').attr('class').indexOf('quarter')!=-1){
                            $('#screen').attr('chargeTypeId',$(this).attr('chargeTypeId'));
                            $('#screen').attr('quarter',$(this).attr('quarter'));
                            $('#screen').attr('typeName','quarter');
                            condition('','','',$(this).attr('quarter'),'',$(this).attr('chargeTypeId'))
                        }else if($(this).parents('.content').attr('class').indexOf('month')!=-1){
                            $('#screen').attr('chargeTypeId',$(this).attr('chargeTypeId'));
                            $('#screen').attr('year',$(this).attr('year'));
                            $('#screen').attr('month',$(this).attr('month'));
                            $('#screen').attr('typeName','month');
                            condition('','','',$(this).attr('year'),$(this).attr('month'),$(this).attr('chargeTypeId'))
                        }

                    })
                    $('.nav2 .classBtn').click(function () {
                        $('.menu').hide();
                        var num = $('.classBtn').index(this);
                        $('.content:eq("' + num + '")').css('display', 'block').siblings('.content').css('display', 'none')
                        $(this).toggleClass("one");
                        $(this).siblings('button').removeClass("one");
                        if($('#screen').attr('typeName')=='year'){
                            condition($(this).val(),'','',$('#screen').attr('year'),'',$('#screen').attr('chargetypeId'))
                        }else if($('#screen').attr('typeName')=='month'){
                            condition($(this).val(),'','',$('#screen').attr('year'),$('#screen').attr('month'),$('#screen').attr('chargetypeId'))
                        }else{
                            condition($(this).val(),'','',$('#screen').attr('quarter'),'',$('#screen').attr('chargetypeId'))
                        }

                    });
                    $('.menu ul li').click(function () {
                        $(this).toggleClass("one");
                        $(this).siblings('li').removeClass("one");
                        var data = $(this).val()
                        if (data <= 3) {
                            if($('#screen').attr('typeName')=='year'){
                                condition('','',data,$('#screen').attr('year'),'',$('#screen').attr('chargetypeId'))
                            }else if($('#screen').attr('typeName')=='month'){
                                condition('','',data,$('#screen').attr('year'),$('#screen').attr('month'),$('#screen').attr('chargetypeId'))
                            }else{
                                condition('','',data,$('#screen').attr('quarter'),'',$('#screen').attr('chargetypeId'))
                            }
                        } else {
                            if($('#screen').attr('typeName')=='year'){
                                condition(data,'','',$('#screen').attr('year'),'',$('#screen').attr('chargetypeId'))
                            }else if($('#screen').attr('typeName')=='month'){
                                condition(data,'','',$('#screen').attr('year'),$('#screen').attr('month'),$('#screen').attr('chargetypeId'))
                            }else{
                                condition(data,'','',$('#screen').attr('quarter'),'',$('#screen').attr('chargetypeId'))
                            }
                        }
                    });
                    $('.layui-icon-search').click(function () {
                        var key = $('.search').val();
                        if($('#screen').attr('typeName')=='year'){
                            condition('',key,'',$('#screen').attr('year'),'',$('#screen').attr('chargetypeId'))
                        }else if($('#screen').attr('typeName')=='month'){
                            condition('',key,'',$('#screen').attr('year'),$('#screen').attr('month'),$('#screen').attr('chargetypeId'))
                        }else{
                            condition('',key,'',$('#screen').attr('quarter'),'',$('#screen').attr('chargetypeId'))
                        }
                    });
                    function condition(filter, key, undertaker,year,month,chargeTypeId) {
                        $('.particulars').show();
                        $('.quarter').hide();
                        $('.year').hide();
                        $('.month').hide();
                        $('.nav2').show();
                        $('.nav1').hide();
                        table.render({
                            elem: '#particulars'
                            , url: '/chargeList/conChargeList'
                            , where: {
                                chargeTypeId: chargeTypeId,
                                year: year,
                                month:month,
                                filter: filter,
                                key: key,
                                undertaker: undertaker,   //编码
                            }
                            , cols: [[
                                {field: 'chargeTypeParentid', title: '科目'}
                                , {field: 'chargeCost', title: '费用'}
                                , {field: 'paymentDate', title: '报销日期'}
                                , {
                                    field: 'chargeUndertaker', title: '费用承担者', templet: function (d) {
                                        if (d.chargeUndertaker == 1) {
                                            return '个人'
                                        } else if (d.chargeUndertaker == 2) {
                                            return '部门'
                                        } else if (d.chargeUndertaker == 3) {
                                            return '公司'
                                        }
                                    }
                                }
                                , {title: '操作', align: 'center', toolbar: '#parDel'}
                            ]], parseData: function (res) { //res 即为原始返回的数据
                                return {
                                    "code": 0, //解析接口状态
                                    "data": res.obj //解析数据列表
                                };
                            }
                        });
                        table.on('tool(particulars)', function (obj) {
                            switch (obj.event) {
                                case 'edit':
                                    if (obj.length === 0) {
                                        layer.msg('请选择一行');
                                    } else if (obj.length > 1) {
                                        layer.msg('只能同时编辑一个');
                                    } else {
                                        location.href = '/charge/add?chargeListId=' + obj.data.chargeListId
                                    }
                                    break;
                                case 'delete':
                                    if (obj.length === 0) {
                                        layer.msg('请选择一行');
                                    } else {
                                        layer.confirm(' 确定要删除吗', {
                                            btn: ['确定', '取消'], //按钮
                                            title: " 删除"
                                        }, function () {
                                            $.ajax({
                                                url: '/chargeList/delChargeList',
                                                type: 'post',
                                                dataType: 'json',
                                                data: {
                                                    chargeListId: obj.data.chargeListId
                                                },
                                                success: function (data) {
                                                    layer.msg('删除成功！');
                                                    table.reload("particulars", {});
                                                }
                                            })
                                        }, function () {
                                            layer.closeAll();
                                        })
                                    }
                                    break;
                                case 'exa':
                                    $.ajax({
                                        url: "/chargeList/findChargeListById",
                                        type: 'get',
                                        data: {
                                            chargeListId: obj.data.chargeListId
                                        },
                                        dataType: "JSON",
                                        success: function (data) {
                                            layer.open({
                                                type: 1,
                                                maxmin: true,
                                                area: ['550px', '500px'],
                                                title: ['费用报销详情'],
                                                content: ' <div class="">' +
                                                '  <div class="layui-form-item">' +
                                                ' <label class="layui-form-label">科目</label>' +
                                                '  <div class="layui-input-block" style="width: 190px">' +
                                                '  <input style="border: none;" readonly type="text" name="chargeTypeParentid" value=' + data.object.chargeTypeParentid + ' class="layui-input">' +
                                                '  </div>' +
                                                '   </div>' +
                                                '  <div class="layui-form-item">' +
                                                '   <label class="layui-form-label">科目预警值</label>' +
                                                '   <div class="layui-input-block" style="width: 190px">' +
                                                '  <input style="border: none;" readonly type="text" name="paymentDate" value=' + data.object.paymentDate + '  class="layui-input">' +
                                                '   </div>' +
                                                '   </div>' +

                                                '  <div class="layui-form-item">' +
                                                '  <div class="layui-inline">' +
                                                '  <label class="layui-form-label">金额</label>' +
                                                '  <div class="layui-input-block" style="width: 190px">' +
                                                '  <input style="border: none;" readonly type="text" name="chargeCost" value=' + data.object.chargeCost + ' class="layui-input">' +
                                                '  </div>' +
                                                ' </div>' +
                                                '  </div>' +
                                                ' <div class="layui-form-item">' +
                                                '  <div class="layui-inline">' +
                                                '  <label class="layui-form-label">日期</label>' +
                                                '  <div class="layui-input-block" style="width: 190px">' +
                                                ' <input style="border: none;" readonly type="text" name="paymentDate" value=' + data.object.paymentDate + ' class="layui-input">' +
                                                ' </div>' +
                                                '  </div>' +
                                                '  </div> <div class="layui-form-item">' +
                                                '  <div class="layui-inline">' +
                                                ' <label class="layui-form-label">承担</label>' +
                                                ' <div class="layui-input-block" style="width: 190px">' +
                                                ' <input style="border: none;" readonly type="text" name="chargeUndertaker" value=' + function () {
                                                    if (data.object.chargeUndertaker == 1) {
                                                        return '个人'
                                                    } else if (data.object.chargeUndertaker == 2) {
                                                        return '部门'
                                                    } else if (data.object.chargeUndertaker == 3) {
                                                        return '公司'
                                                    }
                                                }() + ' class="layui-input">' +
                                                '  </div> </div> </div><div class="layui-form-item">' +
                                                '  <label class="layui-form-label">报销用户</label>' +
                                                ' <div class="layui-input-block" style="width: 190px">' +
                                                ' <input style="border: none;" readonly type="text" name="userName" value=' + data.object.userName + ' class="layui-input">' +
                                                ' </div>' +
                                                ' </div>' +
                                                ' <div class="layui-form-item">' +
                                                ' <label class="layui-form-label">事由</label>' +
                                                ' <div class="layui-input-block" style="width: 190px">' +
                                                ' <input style="border: none;" readonly type="text" name="reason" value=' + data.object.reason + '  class="layui-input">' +
                                                ' </div>' +
                                                ' </div>' +
                                                '  </div>',
                                                btn: ['确定'],
                                                success: function (layero, index) {

                                                },
                                            });
                                        }
                                    })
                                    break;
                            }
                        });
                    }
                },
            });
        }

        $(function () {
            $.ajax({
                url: '/portals/selPortalsUser',
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    $('.user').attr('userId', data.object.userId)
                    $('.user').text(data.object.userName)
                }
            });
            function judge(month, thisMon, val) {
                if (month == thisMon) {
                    return val
                } else {
                    return ''
                }
            }

        });
    });


    function nonEmpty(num) {
        if (num == undefined) {
            return ''
        } else {
            return num
        }
    }
</script>

</html>
